<template>
  <h3> 课程学习进度 </h3>
  <div class="demo-progress">

    <div class="sjm sjm1">
      <el-row :gutter="20" >
        <el-col :span="4"><div>  c++   </div> </el-col>
        <el-col :span="8"> <div class="test">  <el-progress  style="position: absolute " :percentage="100" :format="format" stroke-width="14">
        </el-progress> </div> </el-col>
      </el-row>
    </div>

    <div class="sjm sjm2">
      <el-row :gutter="20" >
        <el-col :span="4"><div>  python   </div> </el-col>
        <el-col :span="8"> <div  class="test">  <el-progress  style="position: absolute " :percentage="10" :format="format" stroke-width="14">
        </el-progress> </div> </el-col>
      </el-row>
    </div>

    <div class="sjm sjm3">
      <el-row :gutter="20" >
        <el-col :span="4"><div>  java   </div> </el-col>
        <el-col :span="8"> <div class="test">  <el-progress  style="position: absolute " :percentage="10" :format="format" stroke-width="14">
        </el-progress> </div> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>

const format = (percentage) => (percentage === 100 ? '已完成' : `${percentage}%`)
</script>

<style scoped>
:root{
  --jinheight:14px;
  --divheight:90px;
  --mheight: calc((var(--divheight) - var(--jinheight)) *0.5 )
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 300px;
}
.sjm{
  margin-bottom: 20px ;
  text-align: center;
  height: 90px;
  width: 400px;
  line-height: 90px;
  border-radius: 18px;
}
.sjm1{
  background-color: burlywood;
}
.sjm2{
  background-color: #42b983;
}
.sjm3{
  background-color: blanchedalmond;
}

.test{
  margin-top: 38px;
}
</style>

